<template>
	<div style="width: 700px">
		<el-dialog :close-on-click-modal="false" :title="parameter.id ? ' 查看' : '添加'" :visible.sync="show" v-if="show" width="75%"
		 v-loading="loading">
			<!-- 内容主体区 -->
			<el-form label-width="75px" ref="form" :model="request.data" :inline="true">
				<el-row>
					<el-col :span="12">
						<el-form-item label="内部名称" prop="name">
							<el-input v-model="request.data.name" readonly autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="定价餐标" prop="price">
							<el-input v-model="request.data.price" readonly autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="对外名称" prop="title">
							<el-input v-model="request.data.title" readonly autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="备注" prop="remark">
							<el-input type="textarea" v-model="request.data.remark" readonly autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-form-item label="菜品描述" prop="description">
						<el-card>
							<el-input type="textarea" readonly v-html="request.data.description" autocomplete="off">
							</el-input>
						</el-card>
					</el-form-item>
				</el-row>
				<el-row>
					<el-col :span="22">
						<el-form-item label="主菜">
							<el-card>
								<el-tag :key="tag.id" v-for="tag in ZCrightck" :disable-transitions="false" type="danger" effect="dark" style="margin: 0 5px;">
									{{tag.title}}
								</el-tag>
							</el-card>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="22">
						<el-form-item label="辅菜">
							<el-card>
								<el-tag :key="tag.id" v-for="tag in rightck" :disable-transitions="false" type="warning" effect="dark" style="margin: 0 5px;">
									{{tag.title}}
								</el-tag>
							</el-card>
						</el-form-item>
					</el-col>

				</el-row>
				<el-row>
					<el-col :span="22">
						<el-form-item label="青菜">
							<el-card>
								<el-tag :key="tag.id" v-for="tag in QCrightck" :disable-transitions="false" type="success" effect="dark" style="margin: 0 5px;">
									{{tag.title}}
								</el-tag>
							</el-card>
						</el-form-item>
					</el-col>

				</el-row>
				<el-row>
					<el-col :span="22">
						<el-form-item label="主食">
							<el-card>
								<el-tag :key="tag.id" v-for="tag in ZSrightck" :disable-transitions="false" type="info" effect="dark" style="margin: 0 5px;">
									{{tag.title}}
								</el-tag>
							</el-card>
						</el-form-item>
					</el-col>

				</el-row>
				<el-row>
					<el-col :span="22">
						<el-form-item label="其他">
							<el-card>
								<el-tag :key="tag.id" v-for="tag in QTrightck" :disable-transitions="false" type="warning" effect="dark" style="margin: 0 5px;">
									{{tag.title}}
								</el-tag>
							</el-card>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">
						<el-form-item label="状态" prop="state">
							<el-select v-model="request.data.state" placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-form-item label="是否辣" prop="isspicy">
						<el-col :span="18">
							<el-radio-group v-model="request.data.isspicy">
								<el-radio :label="1">辣</el-radio>
								<el-radio :label="2">不辣</el-radio>
							</el-radio-group>
						</el-col>
					</el-form-item>
				</el-row>

			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="show = false">退出</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import utils from 'util/utils.js';
	import constant from 'util/constant.js';
	import api from 'api/business/setmeal/setmeal.js';
	import editDialog from './edit.vue';
	import validate from 'util/validate.js';
	export default {
		name: 'edit',
		data() {

			return {
				// 辅菜数据
				FCdata: [],
				ZCdata: [],
				QCdata: [],
				ZSdata: [],
				QTdata: [],
				loading: false,
				show: this.isDisplay,
				request: utils.newRequest(),

				// 状态
				options: [{
						label: '在用',
						value: 1
					},
					{
						label: '停用',
						value: 0
					}
				],
				// 下拉状态选中值
				value: '',
				// 辅菜对话框显示
				dialogtransVisible: false,
				Fdata: [],
				values: [],
				// 辅菜数据源
				rightck: [],
				filterMethod(query, item) {
					// return item.pinyin.indexOf(query) > -1
				},
				// 主菜对话框显示
				ZCdialogtransVisible: false,
				ZCdata: [],
				ZCvalues: [],
				// 辅菜数据源
				ZCrightck: [],
				ZCfilterMethod(query, item) {
					return item.pinyin.indexOf(query) > -1
				},
				// 青菜对话框显示
				QCdialogtransVisible: false,
				QCdata: [],
				QCvalues: [],
				// 辅菜数据源
				QCrightck: [],
				QCfilterMethod(query, item) {
					return item.pinyin.indexOf(query) > -1
				},
				// 主食对话框显示
				ZSdialogtransVisible: false,
				ZSdata: [],
				ZSvalues: [],
				// 主食数据源
				ZSrightck: [],
				ZSfilterMethod(query, item) {
					return item.pinyin.indexOf(query) > -1
				},
				// 其他对话框显示
				QTdialogtransVisible: false,
				QTdata: [],
				QTvalues: [],
				// 其他数据源
				QTrightck: [],
				QTfilterMethod(query, item) {
					return item.pinyin.indexOf(query) > -1
				},
				content: null,
				editorOption: {},
				expression: []
			}

		},

		methods: {

			init() {
				this.request = utils.newRequest();
				if (this.parameter.id) {
					this.ZCrightck = []
					this.rightck = []
					this.QCrightck = []
					this.ZSrightck = []
					this.QTrightck = []
					//编辑
					this.request.param.id = this.parameter.id;
					api.toUpdate(this.request, response => {
						this.request.data = response.data;
						this.request.data.expression = eval('(' + response.data.expression + ')')

						for (let index = 0; index < this.request.data.expression.length; index++) {

							if (this.request.data.expression[index].key == '主菜') {
								for (var i = 0; i < this.request.data.expression[index].contents.length; i++) {

									this.ZCrightck.push(this.request.data.expression[index].contents[i])
								}

							}
							if (this.request.data.expression[index].key == '副菜') {
								this.request.data.expression[index].contents.forEach(element => {
									this.rightck.push(element)
								});
							}
							if (this.request.data.expression[index].key == '青菜') {
								this.request.data.expression[index].contents.forEach(element => {
									this.QCrightck.push(element)
								});
							}
							if (this.request.data.expression[index].key == '小食') {
								this.request.data.expression[index].contents.forEach(element => {
									this.ZSrightck.push(element)
								});
							}
							if (this.request.data.expression[index].key == '其他') {
								this.request.data.expression[index].contents.forEach(element => {
									this.QTrightck.push(element)
								});
							}
						}
					});
				} else {
					//添加

				}
			}
		},
		props: {
			isDisplay: {
				type: Boolean,
				default () {
					return false;
				}
			},
			parameter: {
				type: Array | Object,
				default () {
					return {};
				}
			}
		},
		watch: {
			isDisplay(val) {
				this.show = val;
				if (val) {
					this.init();
				}
			},
			show(val) {
				this.$emit('update:isDisplay', val);
			},
			parameter(val) {
				this.parameter = val;
			}
		}
	}
</script>

<style lang="scss">
	@import '~common/custom/css/common.scss';

	html,
	body,
	#app {
		padding: 0;
		margin: 0;
		height: 100%;
		width: 100%;
	}

	.el-card {
		box-shadow: 0 1px rgba(0, 0, 0, 0.15);
	}

	.el-transfer-panel__item.el-checkbox {
		text-align: left;
	}

	.el-transfer-panel .el-transfer-panel__header .el-checkbox {
		text-align: left;
	}

	.el-transfer {
		font-size: 14px;
		text-align: left;
	}
</style>
